import React, { useEffect } from 'react'
import {
  useNavigate,
  useParams,
  useLocation,
  useSearchParams,
} from 'react-router-dom'

export default function Login() {
  const navigate = useNavigate()
  const params = useParams() // 获取路由参数
  const location = useLocation() // 获取state数据
  const [query, setQuery] = useSearchParams() // 获取查询字符串
  console.log('路由参数', params)
  console.log('state数据', location)
  console.log('查询字符串', query.get('name'), query.get('age'))
  useEffect(() => {
    console.log('Login组件挂载了')
    return () => {
      console.log('Login组件卸载了')
    }
  }, [])
  return (
    <div>
      <h1>Login</h1>
      <button
        onClick={() => {
          navigate(-1)
        }}
      >
        返回
      </button>
      <button
        onClick={() => {
          setQuery('a=1&b=2&c=3')
        }}
      >
        修改浏览器地址栏的查询字符串
      </button>
    </div>
  )
}
